<template>
  <div v-show="show">
    <van-tabbar v-model="active" :placeholder="true">
      <van-tabbar-item icon="home-o" :to="{ path: '/' }">首页</van-tabbar-item>
      <van-tabbar-item icon="chart-trending-o" :to="{ path: '/stock' }"
        >股票</van-tabbar-item
      >
      <van-tabbar-item icon="points" :to="{ path: '/fund' }"
        >基金</van-tabbar-item
      >
      <van-tabbar-item icon="user-o" :to="{ path: '/me' }"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      show: true,
    };
  },
  watch: {
    // $route(newRoute, oldRoute) {
    //   //   console.log(newRoute);
    //   if (["/stock", "/fund", "/me", "/"].indexOf(newRoute.path) == -1) {
    //     this.show = false;
    //   }
    //   console.log(oldRoute);
    // },
    $route: {
      handler(newRoute, oldRoute) {
        let index = ["/", "/stock", "/fund", "/me"].indexOf(newRoute.path);
        if (index !== -1) {
          this.show = true;
          this.active = index;
        } else {
          this.show = false;
        }
        // console.log(oldRoute);
      },
      // 配置立即执行属性
      immediate: true,
    },
  },
};
</script>
